<div class="da-login">
  <d-toast [value]="toastMessage"></d-toast>
  <div class="da-login-form">
    <div class="da-login-logo-wrapper">
      <div class="da-login-logo">
        <span class="da-logo-devui">
          <img src="../../../../../assets/devui-logo.svg" alt="DevUI-Logo" />
        </span>
        <span class="da-text">DevUI</span>
      </div>
      <span class="da-coperation">
        DevUI Design 出品
      </span>
    </div>
    <div class="da-login-ways">
      <d-tabs [(activeTab)]="tabActiveId" type="pills">
        <d-tab *ngFor="let item of tabItems" [id]="item.id">
          <ng-template dTabTitle>
            <span class="da-tabs-title">
              {{ item.title }}
            </span>
          </ng-template>
        </d-tab>
      </d-tabs>
      <ng-container *ngIf="tabActiveId === 'tab1'; else loginWithEmail">
        <ng-template [ngTemplateOutlet]="loginWithPassword"></ng-template>
      </ng-container>
    </div>
    <div class="da-other">
      <span class="devui-form-span">
        其他登录方式:
      </span>
      <i (click)="handleAuth('github')">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20px" height="20px">
          <path
            d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.6,5,2.5,9.3,6.9,10.7v-2.3c0,0-0.4,0.1-0.9,0.1c-1.4,0-2-1.2-2.1-1.9 c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1c0.4,0,0.7-0.1,0.9-0.2 c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6c0,0,1.4,0,2.8,1.3 C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3 c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v3.3c4.1-1.3,7-5.1,7-9.5C22,6.1,16.9,1.4,10.9,2.1z"
          />
        </svg>
      </i>
      <a routerLink="/register">注册账户</a>
    </div>
  </div>

  

  <da-footer></da-footer>
</div>

<ng-template #loginWithPassword>
  <form dForm [layout]="horizontalLayout" [labelSize]="'sm'" ngForm (dSubmit)="onClick(tabActiveId)">
    <d-form-item>
      <d-form-label>用户名：</d-form-label>
      <d-form-control>
        <div>
          <input
            dTextInput
            autocomplete="off"
            name="userName"
            placeholder="Admin or User"
            [(ngModel)]="formData.userAccount"
            [dValidateRules]="formRules['usernameRules']"
          />
        </div>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>密码：</d-form-label>
      <d-form-control [suffixTemplate]="suffixTemplate">
        <input
          dTextInput
          name="password"
          [type]="showPassword ? 'text' : 'password'"
          placeholder="******"
          [(ngModel)]="formData.userAccountPassword"
          (keyup)="onKeyUp($event, tabActiveId)"
          [dValidateRules]="formRules['passwordRules']"
        />
      </d-form-control>
    </d-form-item>
    <div class="da-login-options">
      <div class="da-auto-login">
        <d-toggle [checked]="true"></d-toggle>
        <span class="da-auto-login-text" style="margin-left: 8px">
          自动登录
        </span>
      </div>
      <span
        ><a href="#">忘记密码？</a></span
      >
    </div>
    <button class="da-submit-button" dFormSubmit>
      提交
    </button>
  </form>
</ng-template>
<ng-template #loginWithEmail>
  <form dForm [layout]="horizontalLayout" [labelSize]="'sm'" ngForm (dSubmit)="onClick(tabActiveId)">
    <d-form-item>
      <d-form-label>邮箱：</d-form-label>
      <d-form-control>
        <div>
          <input
            dTextInput
            autocomplete="off"
            name="userEmail"
            placeholder="admin@devui.com"
            [(ngModel)]="formData.userEmail"
            [dValidateRules]="formRules['emailRules']"
          />
        </div>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>密码：</d-form-label>
      <d-form-control [suffixTemplate]="suffixTemplate">
        <input
          dTextInput
          [type]="showPassword ? 'text' : 'password'"
          name="emailPassword"
          placeholder="******"
          [(ngModel)]="formData.userEmailPassword"
          (keyup)="onKeyUp($event, tabActiveId)"
          [dValidateRules]="formRules['passwordRules']"
        />
      </d-form-control>
    </d-form-item>
    <div class="da-login-options">
      <div class="da-auto-login">
        <d-toggle [checked]="true"></d-toggle>
        <span class="da-auto-login-text" style="margin-left: 8px">
          自动登录
        </span>
      </div>
      <span
        ><a href="#">忘记密码？</a></span
      >
    </div>
    <button class="da-submit-button" dFormSubmit>
      提交
    </button>
  </form>
</ng-template>

<ng-template #suffixTemplate>
  <i
    [class]="showPassword ? 'icon icon-preview' : 'icon icon-preview-forbidden'"
    (click)="showPassword = !showPassword"
  ></i>
</ng-template>
